<template>
	<view class="category">
		<scroll-view class="left" scroll-y>
			<view :class="index==select_index?'active':''" @click="getGoods(category.id,index)" v-for="(category,index) in category_list">{{category.name}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="(goods) in goods_list" @click="toDetail(goods.id)">
				<image :src="goods.image" mode="widthFix"></image>
				<view>{{goods.name}}</view>
				<view>销售价:￥{{goods.salesprice}} </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				select_index:0,
				category_list:[],
				cid:1,
				goods_list:[]
			}
		},
		created() {
			// console.log("分类创建")
			//在这里请求商品分类,更新category_list中的数据
			uni.request({
				url:"http://localhost:6061/category/",
				method:"GET",
				header:{
					'Authorization':uni.getStorageSync("token")
				},
				success:(res) => {
					console.log(res.data.data);
					this.category_list = res.data.data;
				}
			}),
			//默认显示第一个分类的商品
			this.getGoods(this.cid,0) 
		},
		methods:{
			getGoods(categoryid,index){
				this.select_index = index;
				uni.request({
					url: 'http://localhost:6061/goods/', //url地址
					data: {
						cid:categoryid
					},
					header:{
						'Authorization':uni.getStorageSync("token")
					},
					method:"GET", //请求方式
					success: (res) => {
						this.goods_list = res.data.data;
					}
				});
			},
			toDetail(gid){
				console.log("商品详情",gid);
				//跳转到商品详情页面
				uni.navigateTo({
					url:"detail?id="+gid
				})
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	.category{
		display: flex;
		height: 100%;
	}
	.left{
		display: flex;
		width: 80px;
		height: 100%;
		border-right: 1px solid #eee;
	}
	.left view{
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 30rpx;
		border-top: 1px solid #eee;
	}
	.active{
		background-color: #b50e03;
		color: white;
	}
	.right{
		margin-top: 0px;
		width: 240px;
		border: 1px solid #007AFF;
	}
	.right .item{
		float: left;
		width: 115px;
		height: 150px;
		border: 1px solid red;
		text-align: center;
	}
	.right .item view{
		height: 21px;
		overflow: hidden;
	}
	.right .item image{
		width: 100px;
	}
</style>
